<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>Analog Gauge Widget Indicators</title>
		<style>
			@import "../_Gauge.css";
			@import "../../../dojo/resources/dojo.css";
			@import "../../../dijit/themes/tundra/tundra.css";
		</style>
		<script type="text/javascript">
			djConfig = {
				parseOnLoad: true,
				isDebug: true
			};
		</script>
		<script type="text/javascript" src="../../../dojo/dojo.js">
		</script>
		<script language="JavaScript" type="text/javascript">
			dojo.require('dojox.gauges.AnalogGauge');
			dojo.require('dojox.gauges.AnalogArcIndicator');
			dojo.require('dojox.gauges.AnalogNeedleIndicator');
			dojo.require('dojox.gauges.AnalogCircleIndicator');
			dojo.require('dojox.gauges.TextIndicator');
			dojo.require('dijit.form.Button');
			dojo.require('dojo.parser');
			
			dojo.addOnLoad(init);
			
			
			function init(){
				var gauge = new dojox.gauges.AnalogGauge({
				
					background: [200, 200, 200],
					id: "gauge",
					width: 250,
					height: 200,
					cx: 125,
					cy: 150,
					radius: 125,
					ranges: [{
						low: 0,
						high: 100,
						color: 'black'
					}],
					
					majorTicks: {
						offset: 90,
						interval: 10,
						length: 3,
						color: 'white'
					},
					
					indicators: [new dojox.gauges.AnalogArcIndicator({
						value: 100,
						width: 30,
						offset: 60,
						color: 'white',
						noChange: true,
						title: 'value',
						hideValue: true
					}), new dojox.gauges.AnalogArcIndicator({
						interactionMode: "gauge",
						value: 20,
						width: 20,
						offset: 65,
						color: 'gray',
						noChange: false,
						title: 'value',
						hideValue: true
					}), new dojox.gauges.TextIndicator({
						value: 20,
						align: 'middle',
						x: 125,
						y: 135,
						font: {
							family: "Arial",
							style: "normal",
							variant: 'small-caps',
							weight: 'bold',
							size: "30px"
						},
						hideValue: false,
						color: 'gray'
					})]
				}, dojo.byId("gauge"));
				
				gauge.startup();
				
				dojo.connect(gauge.indicators[1], "valueChanged", dojo.hitch(gauge, function(){
					this.indicators[2].update(this.indicators[1].value);
				}));
				
				
				gauge = new dojox.gauges.AnalogGauge({
					id: "gauge2",
					startAngle: 0,
					endAngle: 270,
					background: 'white',
					id: "defaultGauge",
					width: 250,
					height: 250,
					cx: 127,
					cy: 125,
					radius: 125,
					ranges: [{
						low: 0,
						high: 100,
						color: 'white'
					}],
					
					majorTicks: {
						offset: 95,
						interval: 20,
						length: 3,
						color: 'black',
						labelPlacement: 'outside'
					},
					
					indicators: [new dojox.gauges.AnalogArcIndicator({
						value: 1000,
						width: 30,
						offset: 65,
						strokeColor: 'black',
						color: 'white',
						noChange: true,
						title: 'value',
						hideValue: true
					}), new dojox.gauges.AnalogArcIndicator({
						value: 20,
						width: 20,
						offset: 70,
						interactionMode: "gauge",
						color: [122, 103, 140],
						noChange: false,
						title: 'value',
						hideValue: true
					}), new dojox.gauges.TextIndicator({
						value: 20,
						align: 'middle',
						x: 125,
						y: 140,
						font: {
							family: "Arial",
							style: "normal",
							variant: 'small-caps',
							weight: 'bold',
							size: "40px"
						},
						hideValue: false,
						color: 'gray'
					})]
				}, dojo.byId("gauge2"));
				
				gauge.startup();
				
				dojo.connect(gauge.indicators[1], "valueChanged", dojo.hitch(gauge, function(){
					this.indicators[2].update(this.indicators[1].value);
				}));
				
				
				gauge = new dojox.gauges.AnalogGauge({
					id: "gauge3",
					startAngle: -30,
					endAngle: 30,
					background: 'white',
					width: 200,
					height: 180,
					cx: 100,
					cy: 150,
					radius: 130,
					ranges: [{
						low: -30,
						high: 30,
						color: 'white'
					}],
					
					majorTicks: {
						offset: 100,
						interval: 10,
						length: 3,
						color: 'black',
						labelPlacement: 'outside'
					},
					
					indicators: [new dojox.gauges.AnalogNeedleIndicator({
						interactionMode: "gauge",
						value: 0,
						width: 10,
						length: 100,
						strokeColor: [100, 100, 100],
						color: [200, 200, 200]
					})]
				}, dojo.byId("gauge3"));
				
				gauge.startup();
				
				
				gauge = new dojox.gauges.AnalogGauge({
					id: "gauge4",
					startAngle: 20,
					endAngle: 20,
					background: 'white',
					width: 200,
					height: 200,
					cx: 100,
					cy: 100,
					radius: 95,
					ranges: [{
						low: 0,
						high: 8,
						color: [50, 90, 102]
					}],
					
					majorTicks: {
						offset: 70,
						interval: 1,
						length: 3,
						color: 'white',
						labelPlacement: 'outside'
					},
					
					indicators: [new dojox.gauges.AnalogCircleIndicator({
						interactionMode: "gauge",
						offset: 45,
						value: 5,
						length: 10,
						strokeColor: [163, 43, 38],
						color: [222, 161, 64]
					
					}), new dojox.gauges.AnalogArcIndicator({
						value: 7,
						width: 10,
						offset: 60,
						
						color: [255, 248, 178],
						noChange: true,
						title: 'value',
						hideValue: true
					})]
				}, dojo.byId("gauge4"));
				
				gauge.startup();
				
			}
		</script>
	</head>
	<body class="tundra">
	<h1>Analog Gauge Widget Indicators</h1>
	<ul class="lst">
		<li>
			Arc and Text indicators
		</li>
	</ul>
	<div id="gauge">
	</div>
	<ul class="lst">
		<li>
			Arc and Text indicators again.
		</li>
	</ul>
	<div id="gauge2">
	</div>
	<ul class="lst">
		<li>
			Needle indicator.
		</li>
	</ul>
	<div id="gauge3">
	</div>
	<ul class="lst">
		<li>
			Circle indicator.
		</li>
	</ul>
	<div id="gauge4">
	</div>
	</div>
</body>
</html>
